﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
<link href="~/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
<body>
    <div class="layui-form">
        <div class="layui-form-item texts-input" style="margin-bottom: 0;">
            <label class="layui-form-label">用户名:</label>
            <div class="layui-input-inline">
                <input type="text" id="userName" name="userName" placeholder="请输入用户名" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">昵称:</label>
            <div class="layui-input-inline">
                <input type="text" id="userNickName" name="userNickName" placeholder="请输入昵称" autocomplete="off" class="layui-input">
            </div>
            <button class="layui-btn layui-bg-blue" lay-submit lay-filter="searchForm">
                <i class="layui-icon layui-icon-search"></i> 搜索
            </button>
            <button type="reset" class="layui-btn layui-btn-primary" onclick="resetForm()">
                <i class="layui-icon layui-icon-refresh"></i> 重置
            </button>
        </div>
    </div>
    <div class="page-container">
        @Html.AntiForgeryToken()
        <table class="layui-table" lay-size="sm" lay-even>
            <thead>
                <tr>
                    <th>用户名称</th>
                    <th>用户昵称</th>
                    <th>手机号</th>
                    <th>部门ID</th>
                </tr>
            </thead>
            <tbody id="tb">
            </tbody>
        </table>
        <div id="pagination"></div>
    </div>
</body>
<script src="~/scripts/jquery-3.4.1.min.js"></script>
<script src="~/scripts/layui-v2.5.6/layui/layui.js"></script>
<script>
    layui.use(['form', 'laypage'], function() {
        var form = layui.form;
        var laypage = layui.laypage;

        // 页面加载时初始化数据
        $(document).ready(function() {
            loadUserList();
        });

        // 搜索表单提交
        form.on('submit(searchForm)', function(data) {
            loadUserList();
            return false;
        });

        // 加载用户列表
        function loadUserList() {
            var userName = $('#userName').val();
            var userNickName = $('#userNickName').val();

            $.ajax({
                url: '/OutgoingInspection/GetUserList',
                type: 'GET',
                data: {
                    UserName: userName,
                    UserNickName: userNickName
                },
                success: function(response) {
                    renderUserTable(response);
                },
                error: function(xhr, status, error) {
                    console.error('请求失败:', error);
                    console.log('响应状态:', xhr.status);
                    console.log('响应内容:', xhr.responseText);
                    layui.layer.msg('加载数据失败: ' + (xhr.responseText || error));
                }
            });
        }

        // 渲染用户表格
        function renderUserTable(data) {
            var tbody = $('#tb');
            tbody.empty();

            if (!data || data.length === 0) {
                tbody.append('<tr><td colspan="4" style="text-align: center; color: #999;">暂无数据</td></tr>');
                return;
            }

            $.each(data, function(index, user) {
                var row = $(`
                    <tr style="cursor: pointer;" data-user-id="${safeValue(user.id || user.userId)}" data-user-name="${safeValue(user.userName)}" data-user-nickname="${safeValue(user.userNickName)}">
                        <td>${safeValue(user.userName)}</td>
                        <td>${safeValue(user.userNickName)}</td>
                        <td>${safeValue(user.userPhone)}</td>
                        <td>${safeValue(user.departmentId)}</td>
                    </tr>
                `);

                // 添加行点击事件
                row.on('click', function() {
                    selectUser($(this));
                });

                // 添加悬停效果
                row.on('mouseenter', function() {
                    $(this).css('background-color', '#f2f2f2');
                }).on('mouseleave', function() {
                    $(this).css('background-color', '');
                });

                tbody.append(row);
            });
        }

        // 选择用户
        function selectUser($row) {
            var userId = $row.data('user-id');
            var userName = $row.data('user-name');
            var userNickName = $row.data('user-nickname');

            // 调用父窗口的setCustomerInfo函数
            if (parent && parent.setCustomerInfo) {
                parent.setCustomerInfo(userId, userNickName);
                // 关闭弹窗
                parent.layer.closeAll();
            } else {
                layui.layer.msg('无法设置客户信息，请确保在正确的环境中打开此页面');
            }
        }

        // 安全输出值，避免undefined显示
        function safeValue(value) {
            return value ? value : '';
        }

        // 重置表单
        window.resetForm = function() {
            $('#userName').val('');
            $('#userNickName').val('');
            loadUserList();
        }
    });
</script>